<template>
  <div class="app-main-container">
    <div class="doumee-filter">
      <el-form inline label-suffix="：" @submit.native.prevent>
        <el-form-item :label="$t('message.jkd')">
          <el-input v-model="filters.name" :placeholder="$t('message.qsr') + $t('message.jkd')" clearable />
        </el-form-item>
        <el-form-item>
          <el-button v-preventReClick type="primary" @click="getList(1)">{{ $t('message.cz') }}</el-button>
          <el-button v-preventReClick @click="clearList">{{ $t('message.clear') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="active" @tab-click="handleClick">
      <el-tab-pane v-for="(tab, i) in tabList" :key="tab.id" :label="tab.manufacturer" :name="i.toString()">
        <div v-if="(tabList[active].id) == 9" class="doumee-filter manufacturer">
          <div>
            <el-button type="primary" @click="showZhpzBtn">{{ $t('message.tjsb') }}</el-button>
          </div>
          <div class="detail" @click="manufacturerDetail"><i class="el-icon-warning-outline" /> {{ $t('message.cssm') }}</div>
        </div>
        <div v-if="(tabList[active].id) != 9" class="doumee-filter manufacturer">
          <div>
            <el-input v-model="entityId" :placeholder="$t('message.qsr') + $t('message.stid')" /><el-button type="primary" @click="crowdedAdd">{{ $t('message.tbsb') }}</el-button>
          </div>
          <div class="detail" @click="manufacturerDetail"><i class="el-icon-warning-outline" /> {{ $t('message.cssm') }}</div>
        </div>
        <el-table
          v-if="(tabList[active].id) == 9"
          ref="table"
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-table"
        >
          <el-table-column
            align="center"
            :label="$t('message.mc')"
            prop="name"
            min-width="200"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="$t('message.txxy')"
            prop="httpPort"
            min-width="100"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.httpPort == '1'?'https':'http' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="$t('message.txdz')"
            prop="ipAddre"
            min-width="200"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="$t('message.tondao')"
            prop="aisle"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            align="center"
            :label="$t('message.jwd')"
            prop="location"
            min-width="120"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="$t('message.sbbm2')"
            prop="macId"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            align="center"
            :label="$t('message.spldz')"
            prop="realTimeVideoAddress"
            show-overflow-tooltip
            min-width="200"
          />
          <el-table-column
            align="center"
            :label="$t('message.spllsdz')"
            prop="historicalVideoAddress"
            show-overflow-tooltip
            min-width="200"
          />
          <el-table-column :label="$t('message.caozuo')" align="center" fixed="right" min-width="100">
            <template slot-scope="scope">
              <div class="flex-cc">
                <el-button type="text" class="secondColor" @click="removeBtn(scope.row.id)">{{ $t('message.del') }}</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-table
          v-if="(tabList[active].id) != 9"
          ref="tableb"
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-table"
        >
          <el-table-column
            align="center"
            :label="$t('message.stId')"
            prop="entityId"
            min-width="160"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="$t('message.stmc')"
            prop="entrtyName"
            show-overflow-tooltip
            min-width="160"
          />
          <el-table-column
            align="center"
            :label="$t('message.crkmc')"
            prop="doorName"
            min-width="160"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="$t('message.sbxlh')"
            prop="deviceSn"
            min-width="120"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="$t('message.sbmc')"
            prop="name"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            align="center"
            :label="$t('message.sbxh')"
            prop="deviceModel"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            align="center"
            :label="$t('message.tbsj')"
            prop="createTime"
            min-width="200"
            show-overflow-tooltip
          />
        </el-table>
        <Paginations
          :total="total"
          :page="pagination.page"
          @current-change="getList"
          @SizeChange="handleSizeChange"
        />
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      :title="$t('message.tjsb')"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :visible.sync="showZhpz"
    >
      <el-form ref="ruleForm" :model="form" label-suffix="：" :rules="rules" label-width="auto">
        <el-form-item :label="$t('message.mc')" prop="name">
          <el-input v-model="form.name" :placeholder="$t('message.qsr') + $t('message.mc')" />
        </el-form-item>
        <el-form-item :label="$t('message.txxy')" prop="httpPort">
          <el-select
            v-model="form.httpPort"
            :placeholder="$t('message.qxz') + $t('message.txxy')"
            clearable
            style="width: 100%"
          >
            <el-option label="http" value="0" />
            <el-option label="https" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('message.txdz')" prop="ip">
          <el-input v-model="form.ip" :placeholder="$t('message.qsr') + $t('message.txdz')" />
        </el-form-item>
        <el-form-item :label="$t('message.dlzh')" prop="account">
          <el-input v-model="form.account" :placeholder="$t('message.qsr') + $t('message.dlzh')" />
        </el-form-item>
        <el-form-item :label="$t('message.dlmm')" prop="password">
          <el-input
            v-model="form.password"
            :placeholder="$t('message.qsr') + $t('message.dlmm')"
            type="password"
          />
        </el-form-item>
        <el-form-item :label="$t('message.tondao')" prop="aisle">
          <el-input v-model="form.aisle" :placeholder="$t('message.qsr') + $t('message.tondao')" />
        </el-form-item>
        <el-form-item :label="$t('message.jindu')" prop="longitude">
          <el-input v-model="form.longitude" :placeholder="$t('message.qsr') + $t('message.jindu')" />
        </el-form-item>
        <el-form-item :label="$t('message.weidu')" prop="latitude">
          <el-input v-model="form.latitude" :placeholder="$t('message.qsr') + $t('message.weidu')" />
        </el-form-item>
        <el-form-item :label="$t('message.sbxlh')" prop="macId">
          <el-input v-model="form.macId" :placeholder="$t('message.qsr') + $t('message.sbxlh')" />
        </el-form-item>
        <el-form-item :label="$t('message.spldz')" prop="realTimeVideoAddress">
          <el-input
            v-model="form.realTimeVideoAddress"
            :placeholder="$t('message.qsr') + $t('message.spldz')"
          />
        </el-form-item>
        <el-form-item :label="$t('message.spllsdz')" prop="historicalVideoAddress">
          <el-input
            v-model="form.historicalVideoAddress"
            :placeholder="$t('message.qsr') + $t('message.spllsdz')"
          />
        </el-form-item>
		<el-form-item :label="$t('message.nvrMacId')" prop="nvrMacId">
		  <el-input
		    v-model="form.nvrMacId"
		    :placeholder="$t('message.qsr') + $t('message.nvrMacId')"
		  />
		</el-form-item>
		<el-form-item :label="$t('message.nvrChannelNo')" prop="nvrChannelNo">
		  <el-input
		    v-model="form.nvrChannelNo"
		    :placeholder="$t('message.qsr') + $t('message.nvrChannelNo')"
		  />
		</el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showZhpz = false">{{ $t('message.qx') }}</el-button>
        <el-button v-preventReClick :loading="subLoading" type="primary" @click="onSubmit">{{ $t('message.qr') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { smcrowdedAdd, smcrowdedDel, smcrowdedHkList, manufacturerList, manufacturerDetail, crowdedList, crowdedAdd } from '@/api'
import { parseTime } from '@/utils'
import store from '@/store'
// import MapDrag from '@/components/Map/mapDrag.vue'
export default {
  name: 'Devicek',
  // components: {
  //   MapDrag
  // },
  data() {
    return {
      modalDialog: store.getters.dialog,
      subLoading: false,
      entityId: '',
      info: {},
      tabList: [],
      functors: [],
      active: '0',
      pagination: {
        page: 1,
        rows: 10
      },
      total: 0,
      list: [],
      listLoading: true,
      statusList: [
        { value: '1', label: this.$t('message.zaixian') },
        { value: '0', label: this.$t('message.lixian') }
      ],
      filters: {},
      param: {},
      showZhpz: false,
      form: {},
      rules: {
        name: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.mc'), trigger: 'blur' }
        ],
        ip: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.txdz'), trigger: 'blur' }
        ],
        httpPort: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.txxy'), trigger: 'change' }
        ],
        account: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.dlzh'), trigger: 'blur' }
        ],
        password: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.dlmm'), trigger: 'blur' }
        ],
        aisle: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.tondao'), trigger: 'blur' }
        ],
        macId: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.sbbm2'), trigger: 'blur' }
        ],
        longitude: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.jindu'), trigger: 'blur' }
        ],
        realTimeVideoAddress: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.spldz'), trigger: 'blur' }
        ],
        historicalVideoAddress: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.spllsdz'), trigger: 'blur' }
        ],
        latitude: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.weidu'), trigger: 'blur' }
        ],
        location: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.jtdz'), trigger: 'blur' }
        ]
      }
    }
  },
  // computed: {
  //   latitude() {
  //     return this.form.location
  //       ? this.form.location.split(',')[0]
  //       : ''
  //   },
  //   longitude() {
  //     return this.form.location
  //       ? this.form.location.split(',')[1]
  //       : ''
  //   }
  // },
  created() {
    this.tomanufacturerList()
  },
  activated() {
    if (this.list && this.list.length > 0) {
      if (this.tabList[this.active].id === 9 || this.tabList[this.active].id === '9') {
        this.$refs.table.doLayout()
      } else {
        this.$refs.tableb.doLayout()
      }
    }
  },
  methods: {
    getCenter(data) {
      this.$set(this.form, 'postion', data.address)
      this.$set(this.form, 'location', data.lnglat)
      this.$refs.ruleForm.clearValidate()
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    crowdedAdd() {
      if (!this.entityId) {
        this.$message.info(this.$t('message.qsr') + this.$t('message.stid'))
        return false
      }
      crowdedAdd({ param: {
        facturerId: this.tabList[this.active].id,
        venueId: sessionStorage.getItem('venueId'),
        id: this.entityId
      }}).then((res) => {
        if (res.errorCode === '000000') {
          this.$message.success(this.$t('message.tbcg'))
          this.getList(1)
        }
      })
    },
    removeBtn(id) {
      const that = this
      this.$confirm(this.$t('message.scsxttc'), this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning',
        callback: () => {},
        beforeClose: (action, ctx, close) => {
          if (action !== 'confirm') {
            close()
            return
          }
          ctx.confirmButtonLoading = true
          smcrowdedDel({ param: { id }}).then((res) => {
            ctx.confirmButtonLoading = false
            close()
            if (res.errorCode === '000000') {
              that.$message.success(this.$t('message.delcg'))
              that.getList(1)
            }
          })
            .catch(() => { ctx.confirmButtonLoading = false })
        }
      }).finally(() => {})
    },
    showZhpzBtn() {
      this.form = {}
      this.showZhpz = true
    },
    onSubmit() {
      const that = this
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const param = { ... that.form }
          param.venueId = sessionStorage.getItem('venueId')
          param.manuFacturer = that.tabList[this.active].id
          param.manuFacturerName = that.tabList[this.active].manufacturer
          param.userId = sessionStorage.getItem('userId')
          param.location = param.longitude + ',' + param.latitude
          this.subLoading = true
          smcrowdedAdd({
            param
          }).then(res => {
            this.subLoading = false
            if (res.errorCode === '000000') {
              that.$message.success(this.$t('message.tjsbcg'))
              that.showZhpz = false
              that.getList(1)
            }
          }).catch(err => {
            this.subLoading = false
            console.log(err)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    pickerBeginOption(e) {
      const date = new Date()
      const minutes = date.getMinutes()
      // h和m 是将日期只取时分
      const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      const m = (minutes < 10 ? '0' + minutes : minutes)
      // pickerDate 判断当前选择时间是否等于上条数据时间
      // 若等于时，限制时间从00：00：00 - 上条数据开始时间，不等于时，24小时可选
      let str = ''
      if (e === 1) { str = this.param.startTime } else { str = this.param.endTime }
      const pickerDate = date.toDateString() === new Date(str).toDateString()
      return { disabledDate: (time) => {
        return time.getTime() > new Date().getTime()
      },
      selectableRange: pickerDate ? '00:00:00 -' + h + m + ':00' : '00:00:00 - 23:59:59' }
    },
    handleClick(e) {
      this.getList(1)
    },
    clearList() {
      this.filters = {}
      this.getList(1)
    },
    getList(page) {
      const { filters, pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      let open = null
      if (Number(this.tabList[this.active].id) === 9) {
        open = smcrowdedHkList
      } else {
        open = crowdedList
      }
      this.listLoading = true
      open({ pagination, param: { venueId, ...filters, manuFacturer: this.tabList[this.active].id }}, sessionStorage.getItem('venueId')).then(res => {
        this.listLoading = false
        if (res.errorCode === '000000') {
          this.list = res.recordList
          this.total = res.totalCount
          this.info = res
        }
      }).catch(() => {
        this.listLoading = false
      })
    },
    tomanufacturerList() {
      manufacturerList({ param: { type: '2' }}, sessionStorage.getItem('venueId')).then(res => {
        this.tabList = res.recordList
        this.functors = res.recordList[0].functors || []
        this.getList(1)
      }).catch(err => {
        console.log(err)
      })
    },
    manufacturerDetail() {
      manufacturerDetail({ param: { manufacturerId: this.tabList[this.active].id }}, sessionStorage.getItem('venueId')).then(res => {
        if (res.errorCode === '000000') {
          const cont = res.record.manufacturer + res.record.text.replace(/\n/g, '<br/>')
          this.$alert(cont, this.$t('message.cssm'), {
            dangerouslyUseHTMLString: true
          })
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.hksp {
  width: 100%;
  height: 70vh;
}
.xzsj {
  display: flex;
  align-items: center;
  .division-line {
    margin: 0 20px;
  }
}
.tips{
  display: flex;
  margin-bottom: 20px;
  .tips_box{
    flex: 1;
    display: flex;
    align-items: center;
    background-color: rgba(32, 178, 170, 1);
    &:first-of-type{
      margin-right: 10px;
    }
    &:last-of-type{
      margin-left: 10px;
      background-color: rgba(65, 105, 225, 1);
    }
    div {
      font-size: 20px;
      color: #fff;
      text-align: center;
      padding: 20px 0;
      line-height: 1.5;
      flex: 1;
      p{
        margin: 0;
        &:last-of-type{
          margin-top: 20px;
          font-size: 24px;
          font-weight: bold;
        }
      }
      &.tips_xian{
        width: 1px;
        height: 80px;
        background-color: #fff;
        flex: none;
      }
    }
  }
}
.videobox {
  width: 100%;
  height: 500px;
  overflow: hidden;
}
</style>
<style>
.rqtc .el-picker-panel__footer .el-button--text{
  display: none !important;
}
</style>
